<template>
	<view>
		<view v-if="isPass===0">
			<view class="content">
				<view class="title">
					基本信息
				</view>
				<view class="a1">
					<view class="flex1">
						<view class="item1">
							<image class="must" src="https://pw.qyang.cc/static/must.png" mode=""></image>头像
						</view>
						<view class="item2">
							<image class="avator" :src="userInfo.avator" mode=""></image>
							<u-icon name="arrow-right" size="14" color="#d2d2d2"></u-icon>
						</view>
					</view>
					<view class="flex1">
						<view class="item1">
							<image class="must" src="https://pw.qyang.cc/static/must.png" mode=""></image>昵称
						</view>
						<view class="item2">
							<u-input placeholder="请输入" border="none" inputAlign="right"
								v-model='editUserInfo.name'></u-input>
						</view>
					</view>
					<view class="flex1">
						<view class="item1">
							<image class="must" src="https://pw.qyang.cc/static/must.png" mode=""></image>性别
						</view>
						<view class="item2" @click="showSex = !showSex">
							<u-input placeholder="请选择" border="none" inputAlign="right" v-model='sex'></u-input>
							<u-icon name="arrow-right" size="14" color="#d2d2d2"></u-icon>
						</view>
					</view>
					<view class="flex1">
						<view class="item1">
							<image class="must" src="https://pw.qyang.cc/static/must.png" mode=""></image>年龄
						</view>
						<view class="item2">
							<u-input placeholder="请输入" border="none" inputAlign="right"
								v-model='editUserInfo.age'></u-input>
						</view>
					</view>
					<view class="flex1">
						<view class="item1">
							<image class="must" src="https://pw.qyang.cc/static/must.png" mode=""></image>身高（cm）
						</view>
						<view class="item2">
							<u-input placeholder="请输入" border="none" inputAlign="right"
								v-model='editUserInfo.shengao'></u-input>
						</view>
					</view>
					<view class="flex1">
						<view class="item1">
							<image class="must" src="https://pw.qyang.cc/static/must.png" mode=""></image>体重（kg）
						</view>
						<view class="item2">
							<u-input placeholder="请输入" border="none" inputAlign="right"
								v-model='editUserInfo.tizhong'></u-input>
						</view>
					</view>
					<view class="flex1">
						<view class="item1">简介</view>
						<view class="item2">
							<u-input placeholder="请设置" border="none" inputAlign="right"
								v-model='editUserInfo.jianjie'></u-input>
							<u-icon name="arrow-right" size="14" color="#d2d2d2"></u-icon>
						</view>
					</view>
				</view>
				<view class="title">
					更多信息
				</view>
				<view class="a1">
					<view class="flex1">
						<view class="item1">
							<image class="must" src="https://pw.qyang.cc/static/must.png" mode=""></image>电话
						</view>
						<view class="item2">
							<u-input placeholder="请输入" border="none" inputAlign="right"
								v-model='editUserInfo.phone'></u-input>
						</view>
					</view>
					<view class="flex1">
						<view class="item1">
							<image class="must" src="https://pw.qyang.cc/static/must.png" mode=""></image>微信
						</view>
						<view class="item2">
							<u-input placeholder="请输入" border="none" inputAlign="right"
								v-model='editUserInfo.weixin'></u-input>
						</view>
					</view>
					<view class="flex1">
						<view class="item1">
							<image class="must" src="https://pw.qyang.cc/static/must.png" mode=""></image>视频
						</view>
						<view class="item2">
							<u-input placeholder="请上传" border="none" inputAlign="right"
								v-model='editUserInfo.video'></u-input>
							<u-icon name="arrow-right" size="14" color="#d2d2d2"></u-icon>
						</view>
					</view>
					<view class="flex1">
						<view class="item1">
							<image class="must" src="https://pw.qyang.cc/static/must.png" mode=""></image>相册
						</view>
						<view class="item2">
							<u-input placeholder="请上传" border="none" inputAlign="right"
								v-model='editUserInfo.pic'></u-input>
							<u-icon name="arrow-right" size="14" color="#d2d2d2"></u-icon>
						</view>
					</view>
				</view>
				<view class="title">
					入驻信息
				</view>
				<view class="a1">
					<view class="flex1">
						<view class="item1">
							<image class="must" src="https://pw.qyang.cc/static/must.png" mode=""></image>城市
						</view>
						<view class="item2" @click="showCity = !showCity">
							<u-input placeholder="请选择" border="none" inputAlign="right" v-model='city'></u-input>
							<u-icon name="arrow-right" size="14" color="#d2d2d2"></u-icon>
						</view>
					</view>
					<view class="flex1">
						<view class="item1">
							<image class="must" src="https://pw.qyang.cc/static/must.png" mode=""></image>类目
						</view>
						<view class="item2" @click="showCategory = !showCategory">
							<u-input placeholder="请选择" border="none" inputAlign="right" v-model='category'></u-input>
							<u-icon name="arrow-right" size="14" color="#d2d2d2"></u-icon>
						</view>
					</view>
					<view class="flex1">
						<view class="item1">
							<image class="must" src="https://pw.qyang.cc/static/must.png" mode=""></image>实名
						</view>
						<view class="item2">
							<u-input placeholder="请认证" border="none" inputAlign="right"
								v-model='editUserInfo.real'></u-input>
							<u-icon name="arrow-right" size="14" color="#d2d2d2"></u-icon>
						</view>
					</view>
				</view>
				<view class="title">
					平台评价
				</view>
				<view class="a1">
					<view class="flex1" style="justify-content: flex-end;">
						<view class="item2" @click="showComment=true">
							<u-input placeholder="请输入" border="none" inputAlign="right"
								v-model='commentContent'></u-input>
							<u-icon name="arrow-right" size="14" color="#d2d2d2"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<view class="bottom">
				<view class="btn" @click="submit">确定/提交</view>
			</view>
			<u-popup :show="showComment" mode="center" @close="showComment=false" @open="showComment=true"
				closeable="true" round="10">
				<view class="pop-bg">
					评价：
					<view class="text">
						<u--textarea v-model="commentContent" placeholder="请输入..." count maxlength="60"
							height="100"></u--textarea>
					</view>

					<view class="btn">
						<view class="cancel" @click="showComment=false">取消</view>
						<view class="confirm" @click="confirmComment">确认</view>
					</view>
				</view>
			</u-popup>
			<u-picker :show="showSex" :columns="columnsSex" @confirm="confirmSex"></u-picker>
			<u-picker :show="showCity" ref="uPicker" :columns="columnsCity" @confirm="confirmCity"
				@change="changeHandler"></u-picker>
			<u-picker :show="showCategory" :columns="columnsCategory" @confirm="confirmCategory"></u-picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPass: 0, //0未申请，1通过  2未通过
				userInfo: {},
				editUserInfo: {},
				sex: '',
				category: '',
				city: '',
				radio: false,
				showSex: false,
				showCategory: false,
				showCity: false,
				showComment: false,
				commentContent: '',
				columnsSex: [
					['男', '女']
				],
				columnsCity: [
					['中国', '美国'],
					['深圳', '厦门', '上海', '拉萨']
				],
				columnsCityData: [
					['深圳', '厦门', '上海', '拉萨'],
					['得州', '华盛顿', '纽约', '阿拉斯加']
				],
				columnsCategory: [
					['类目1', '类目2', '类目3']
				],
			};
		},
		onLoad(opt) {
			const userInfo = JSON.parse(opt.id)
			console.log(userInfo);
			this.userInfo = userInfo
		},
		methods: {
			receiveReal(dataArray) {
				this.editUserInfo = {
					...this.editUserInfo,
					real_pic1: dataArray.pic1,
					real_pic2: dataArray.pic2,
					real_name: dataArray.name,
				};
			},
			receiveVideo(dataArray) {
				this.editUserInfo = {
					...this.editUserInfo,
					video: dataArray.video
				};
			},
			receivePhoto(dataArray) {
				this.editUserInfo = {
					...this.editUserInfo,
					pic: dataArray.pic
				};
			},
			receiveJianjie(dataArray) {
				this.editUserInfo = {
					...this.editUserInfo,
					jianjie: dataArray.content
				};
			},
			changeRadio() {
				this.radio = !this.radio
			},
			confirmSex(e) {
				if (e.value == '男') {
					this.sex = '男'
					this.editUserInfo.sex = 1
				} else {
					this.sex = '女'
					this.editUserInfo.sex = 2
				}
				this.showSex = false
			},
			confirmCategory(e) {
				this.category = e.value
				this.showCategory = false
			},
			confirmComment() {
				console.log('确认');
				this.showComment = false
			},
			// 回调参数为包含columnIndex、value、values
			confirmCity(e) {
				this.city = e.value[0] + e.value[1]
				this.showCity = false
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnsCityData[index])
				}
			},
			submit() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	.app-content {
		height: 100vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 56px;
			height: 56px;
			margin-top: 200rpx;
		}

		.text {
			font-family: PingFang SC;
			font-size: 16px;
			font-weight: normal;
			line-height: 14px;
			letter-spacing: 0px;
			color: #FF7681;
			margin: 40rpx 0;
		}

		.text1 {
			font-family: PingFang SC;
			font-size: 16px;
			font-weight: normal;
			line-height: 14px;
			letter-spacing: 0px;
			color: #000000;
			margin: 40rpx 0;
		}

		.text2 {
			font-family: PingFang SC;
			font-size: 14px;
			font-weight: normal;
			line-height: 14px;
			letter-spacing: 0px;
			color: #999999;
		}

		.btn {
			width: 80%;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-align: center;
			line-height: 74rpx;
			margin: 15rpx 64rpx;
			background: #FF5866;
			border-radius: 102px;
			border: 1px solid #FF5866;
			margin-top: 180rpx;
		}
	}

	.content {
		padding-bottom: 250rpx;

		.check {
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 12px;
			font-weight: normal;
			line-height: 20px;
			letter-spacing: 0px;
			margin: 0 30rpx;
			color: #999999;
			display: flex;
			align-items: center;

			.text {
				color: #333333
			}
		}
	}

	.title {
		margin: 30rpx;
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: normal;
		line-height: 14px;
		letter-spacing: 0px;

		font-variation-settings: "opsz" auto;
		color: #6E6E6E;
	}

	.a1 {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		display: flex;
		flex-direction: column;
		gap: 25rpx;

		.flex1 {
			border-bottom: 1rpx solid #e9e9e9;
			padding-bottom: 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;



			.item1 {
				font-size: 14px;
				font-weight: normal;
				line-height: 14px;
				letter-spacing: 0px;

				color: #333333;

				.must {
					width: 15rpx;
					height: 15rpx;
					margin-right: 10rpx;
				}
			}

			.item2 {
				display: flex;
				align-items: center;
				gap: 20rpx;
				font-family: PingFang SC;
				font-size: 13px;
				font-weight: normal;
				line-height: 14px;
				text-align: right;
				letter-spacing: 0px;
				color: #999999;

				.avator {
					width: 64rpx;
					height: 64rpx;
				}
			}
		}
	}

	.pop-bg {
		width: 260px;
		height: 180px;
		border-radius: 8px;
		opacity: 1;
		background: #FFFFFF;
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: normal;
		line-height: 14px;
		letter-spacing: 0px;
		color: #333333;
		padding: 40rpx;

		.text {
			margin: 40rpx 0;
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;

			.cancel {
				width: 98px;
				height: 34px;
				border-radius: 102px;
				opacity: 1;

				background: #F7F7F7;

				border: 1px solid #F7F7F7;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 40rpx;
			}

			.confirm {
				width: 98px;
				height: 34px;
				border-radius: 102px;
				opacity: 1;

				background: #FF5866;

				border: 1px solid #FF5866;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 1;

		.btn {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-align: center;
			line-height: 88rpx;
			margin: 15rpx 64rpx;
			background: #FF5866;
			border-radius: 102px;
			border: 1px solid #FF5866;
		}
	}
</style>